import 'dart:math';
import 'package:flutter/material.dart';

class GridviewExample extends StatefulWidget {
  @override
  _GridviewExampleState createState() => _GridviewExampleState();
}

class _GridviewExampleState extends State<GridviewExample> {
  List<GridItemModel> list;
  @override
  void initState() {
    String picName = 'assets/pics/headimg.png';
    list = [
      GridItemModel(
          pic: picName,
          name: 'AAAAAAAAA',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
      GridItemModel(
          pic: picName,
          name: 'AAA',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
      GridItemModel(
          pic: picName,
          name: 'AAAAAAAAA',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
      GridItemModel(
          pic: picName,
          name: 'AAAAAAAAA',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
      GridItemModel(
          pic: picName,
          name: 'AAAAAAAAA',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
      GridItemModel(
          pic: picName,
          name: 'A',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
      GridItemModel(
          pic: picName,
          name: 'AAAAAAAAA',
          color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256),
              Random().nextInt(256), 1)),
    ];
    super.initState();
  }

  Widget gridViewItem(GridItemModel itemModel) {
    return Container(
      color: itemModel.color,
      child: Column(
        children: [
          Image.asset(itemModel.pic, width: 24, height: 48),
          RichText(
            text: TextSpan(text: itemModel.name),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridviewExample'),
      ),
      body: GridView.count(
        crossAxisCount: 5,
        children: list.map((GridItemModel e) {
          return gridViewItem(e);
        }).toList(),
      ),
    );
  }
}

class GridItemModel {
  String pic;
  String name;
  Color color;

  GridItemModel({this.pic, this.name, this.color});
}
